/*
 * @Author: ray
 * @Date:   2019-06-13 17:30:19
 * @Last Modified by:   ray
 * @Last Modified time: 2019-06-13 19:24:49
 */
/**
 * ZenAutoComplete description
 * @param {object} props [description]
 * @example
 // [configOptions] :{showHint:true,containClass:"",inputClass:"",hintWrapClass:"",hintClass:""}
 <ZenAutoComplete onClickCallback={someClickCallback} onChangeCallBack={someChangeCallback} dataList={dataList} configOptions={config} />
 */
import "./ZenAutoComplete.css";
export default function ZenAutoComplete(props) {
	const [currentState, updateState] = usePartState({});
	const {
		onChangeCallback,
		onClickCallback,
		currentScope,
		dataList = [],
		configOptions = {}
	} = props;
	const clickHint = (item, index) => {
		// updateState({ hideHint: true });
		onClickCallback && onClickCallback(item, index);
	};

	function changeWord(e) {
		onChangeCallback && onChangeCallback(e);
	}

	function hideHint(e) {
		// if (!e || e.target.id != "ZenAutoComplete-id") {
		// EventApi.emit("hideHint", false);
		// }
		updateState({ hideHint: true });
	}

	React.useEffect(() => {
		window.addEventListener("click", hideHint);
		return () => {
			window.removeEventListener("click", hideHint);
		};
	});

	React.useEffect(() => {
		updateState({ hideHint: false });
	}, [dataList]);

	/*const dataList = [
        "EWSR1",
        "EW 7197",
        "EW-7197",
        "EWS Antibody",
        "EWSR1 Antibody"
    ];*/

	return (
		<div
			className={Uts.sc(["ZenAutoComplete", configOptions.containClass])}
		>
			<input
				type="text"
				className={Uts.sc([
					"ZenAutoComplete-input",
					configOptions.inputClass
				])}
				onChange={changeWord}
			/>
			{dataList.length && !currentState.hideHint && (
				<div
					id="ZenAutoComplete-id"
					className={Uts.sc([
						"ZenAutoComplete-wrap",
						configOptions.hintWrapClass
					])}
				>
					{dataList &&
						dataList.map(function(item, index) {
							return (
								<div
									key={item}
									className={Uts.sc([
										"ZenAutoComplete-list",
										configOptions.hintClass
									])}
									onClick={() => {
										clickHint(item, index);
									}}
								>
									{item}
								</div>
							);
						})}
				</div>
			)}
		</div>
	);
}
